<template>
  <div class="content">
    <Calendar
        ref="Calendar"
        :markDateMore="arr"
        :markDate="arr2"
        v-on:isToday="clickToday"
        agoDayHide="1530115221"
        v-on:choseDay="clickDay"
        v-on:changeMonth="changeDate"
    ></Calendar>
    <br>
    <div class="choseMonth-style" style="background-color: #398ade;" @click="ChoseMonthChock ">点击跳到2022-01-21</div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";

export default {
  data() {
    return {
      arr2: [],
      arr: [
        {
          date: "2022/01/1",
          className: "mark1"
        },
        {
          date: "2022/01/13",
          className: "mark2"
        }
      ]
    };
  },
  components: {
    Calendar
  },
  methods: {
    clickDay(data) {
      console.log("选中了", data); //选中某天
      this.$toast("选中了" + data);
    },
    clickToday(data) {
      console.log("跳到了本月今天", data); //跳到了本月
    },
    changeDate(data) {
      this.$toast("切换到的月份为" + data);
      console.log("左右点击切换月份", data); //左右点击切换月份
    },
    ChoseMonthChock() {
      this.$refs.Calendar.ChoseMonth("2018-12-13"); //跳到12月12日选中12月12日
    }
  },
  created() {
    function format(date, index) {
      date = new Date(date);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${index}`;
    }

    setTimeout(() => {
      this.arr = [
        {
          date: format(new Date(), 3),
          className: "mark1"
        },
        {
          date: format(new Date(), 12),
          className: "mark2"
        }
      ];
      this.arr.push({
        date: format(new Date(), 15),
        className: "mark1"
      });
    }, 300);
  }
};
</script>

<style scoped>
/* 重写css部分 start */
/deep/ .wh_content_item {
  color: black;
}

/deep/ .wh_top_changge li {
  color: black;
}

/deep/ .wh_jiantou1 {
  border-top: 2px solid #030303;
  border-left: 2px solid #030303;
}

/deep/ .wh_jiantou2 {
  border-top: 2px solid #030303;
  border-right: 2px solid #030303;
}

/deep/ .wh_jiantou1 {
  background-color: white;
}

/deep/ .wh_content_all {
  background-color: #ffffff
}

/deep/ .wh_content_item .wh_isToday {
  background-color: #2b85e4
}

/deep/ .wh_content_item .wh_chose_day {
  background-color: #9acafc;
}

/* 重写css部分 end */

h3 {
  text-align: center;
  width: 90%;
  margin: auto;
}

.choseMonth-style {
  margin: auto;
  width: 220px;
  height: 44px;
  line-height: 44px;
  /*background: #0fc37c;*/
  color: #fff;
  font-size: 17px;
  text-align: center;
  margin-top: 20px;
}

.wh_container >>> .mark1 {
  background-color: #f99341;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  text-align: center;
  margin-left: 13px;
}
/*.wh_container >>> .mark1 {*/
/*  background-color: orange;*/
/*}*/

.wh_container >>> .mark2 {
  background-color: blue;
}

.wh_content_item > .wh_isMark {
  background: orange;
}
</style>

<!--<style lang="scss" rel="stylesheet/scss">-->
<!--.nCalender {-->

<!--  .detailDiv {-->
<!--    margin: 20px 0;-->

<!--    .imgDiv {-->
<!--      img {-->
<!--        width: 60px;-->
<!--        height: 60px;-->
<!--      }-->
<!--    }-->

<!--    .hourDiv {-->
<!--      background-color: white;-->
<!--      padding-top: 10px;-->

<!--      .clockStyle {-->
<!--        font-size: 16px;-->
<!--        color: #4b90ed;-->
<!--      }-->

<!--      .hourText {-->
<!--        font-size: 14px;-->
<!--        margin-left: 5px;-->
<!--      }-->
<!--    }-->

<!--    .stepDiv {-->
<!--      .tagDiv {-->
<!--        margin-top: 10px;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--  <div class="nCalender">-->
<!--    <navBar-->
<!--        :showLeft="true"-->
<!--        :borderLine=true-->
<!--        background="#f2f2f2"-->
<!--        title="考勤日历">-->
<!--      <div @click="$router.push('/h5nAddCard')" slot="right">补卡</div>-->
<!--    </navBar>-->
<!--    <van-field label="选择工单" v-if="list.length>1"-->
<!--               :value="obj1!=null&&obj1.joinWishId!=null?obj1.joinWishId:null">-->
<!--      <selectJoinTemp slot="input" name="joinWishId" name1="auditUserId"-->
<!--                      v-model="obj1" :isDefault="true"/>-->
<!--    </van-field>-->
<!--    &lt;!&ndash;日历&ndash;&gt;-->
<!--    <div class="CalendarDiv" v-if="obj1&&obj1.joinWishId&&obj1.joinWishId>0">-->
<!--      <nCalendar-->
<!--          :joinWishId="obj1.joinWishId"-->
<!--          v-on:choseDay="clickDay"-->
<!--          v-on:changeMonth="changeDate"/>-->
<!--    </div>-->

<!--    <div v-if="list.length==0" class="detailDiv" style="text-align: center;color: #bfbfbf">-->
<!--      <div class="imgDiv">-->
<!--&lt;!&ndash;        <img src="../img/rest.png"/>&ndash;&gt;-->
<!--      </div>-->
<!--      <div style="margin-top: 2%">-->
<!--        无合同-->
<!--      </div>-->
<!--    </div>-->
<!--    &lt;!&ndash;当日详情&ndash;&gt;-->
<!--    <span></span>-->
<!--    <div class="detailDiv"-->
<!--         v-if="obj!=null&&obj.id>0&&obj.recordDate&&new Date(obj.recordDate.replace(/-/g,'/'))<new Date()">-->
<!--      <div class="hourDiv">-->
<!--        <van-row>-->
<!--          <van-col offset="1">-->
<!--            <van-icon name="clock" class="clockStyle"/>-->
<!--          </van-col>-->
<!--          <van-col class="hourText">工时共计:<span v-if="obj.totalHour!=null">{{obj.totalHour}}小时</span>-->
<!--            <span v-else>暂无</span></van-col>-->
<!--        </van-row>-->
<!--      </div>-->
<!--      <div class="stepDiv">-->
<!--        <van-steps direction="vertical" :active="-1">-->
<!--          <van-step>-->
<!--            <div>-->
<!--              签到时间&nbsp;-->
<!--              <span v-if="obj.onDutyTime">{{formatMinutes(obj.onDutyTime)}}</span>-->
<!--              <span v-else>暂无</span>（上班时间：{{formatMinutes(obj.serverStartTime)}}）-->
<!--            </div>-->
<!--            <div class="tagDiv">-->
<!--              <van-tag v-if="obj.onDutyTime&&!isLate(obj.onDutyTime,obj.serverStartTime)" round-->
<!--                       type="primary">正常-->
<!--              </van-tag>-->
<!--              <van-tag v-else round-->
<!--                       type="warning">迟到-->
<!--              </van-tag>-->
<!--            </div>-->
<!--          </van-step>-->
<!--          <van-step>-->
<!--            <div>-->
<!--              签退时间&nbsp;-->
<!--              <span v-if="obj.offDutyTime">{{formatMinutes(obj.offDutyTime)}}</span>-->
<!--              <span v-else>暂无</span>（下班时间：{{formatMinutes(obj.serverEndTime)}}）-->
<!--            </div>-->
<!--            <div class="tagDiv">-->
<!--              <van-tag v-if="obj.offDutyTime&&isLate(obj.serverEndTime,obj.offDutyTime)" round-->
<!--                       type="warning">早退-->
<!--              </van-tag>-->
<!--              <van-tag v-if="obj.offDutyTime&&!isLate(obj.serverEndTime,obj.offDutyTime)" round-->
<!--                       type="primary">正常-->
<!--              </van-tag>-->
<!--            </div>-->
<!--          </van-step>-->
<!--        </van-steps>-->
<!--      </div>-->

<!--    </div>-->
<!--    <div v-if="obj!=null&&obj.id>0&&!obj.offDutyTime&&!obj.onDutyTime" class="detailDiv"-->
<!--         style="text-align: center;color: #bfbfbf">-->
<!--      <div class="imgDiv">-->
<!--&lt;!&ndash;        <img src="../img/rest.png"/>&ndash;&gt;-->
<!--      </div>-->
<!--      <div style="margin-top: 2%">-->
<!--        当天无打卡记录-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import nCalendar from './components/checkCalendar'-->
<!--export default {-->
<!--  name: "nCalender",-->
<!--  components:{-->
<!--    nCalendar-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      loginNannyUser: {},-->
<!--      loginGzhUser: {},-->
<!--      obj: {},-->
<!--      obj1: {},-->
<!--      list: [],-->
<!--      dateTemp: null-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    isLate(str, str1) {//判断两个时分秒大小-->
<!--      return new Date((this.formatDates(new Date()) + " " + str).replace(/-/g, '/')) > new Date((this.formatDates(new Date()) + " " + str1).replace(/-/g, '/'));-->
<!--    },-->
<!--    clickDay(data) {//选中某天-->
<!--      this.dateTemp = data-->
<!--      this.axiosPost("/nannyCheckIn/findNowRecord.n", {-->
<!--        queryDate: data,-->
<!--        id: this.obj1.joinWishId-->
<!--      }, function (resData) {-->
<!--        this.obj = resData.obj;-->
<!--      });-->
<!--    },-->
<!--    changeDate(data) {//左右点击切换月份-->
<!--      console.log(data);-->
<!--    },-->
<!--  },-->
<!--  mounted() {-->

<!--  },-->
<!--  created() {-->
<!--    let $this = this;-->
<!--    // this.getLoginAllUser("nanny", {}, function () {-->
<!--    //   $this.axiosPost("/joinWishList/findNannyCon.n", {}, function (resData) {-->
<!--    //     $this.list = resData.list;-->
<!--    //     if (resData.list != null && resData.list.length != 0) {-->
<!--    //       $this.$set($this.obj1, "joinWishId", resData.list[0].id);-->
<!--    //     }-->
<!--    //     $this.axiosPost("/nannyCheckIn/findNowRecord.n", {id: $this.obj1.joinWishId}, function (resData) {-->
<!--    //       $this.obj = resData.obj;-->
<!--    //     });-->
<!--    //   });-->
<!--    // });-->
<!--  },-->
<!--  watch: {-->
<!--    "obj1.joinWishId": {-->
<!--      handler(newObj, oldObj) {-->
<!--        if (newObj != oldObj && newObj && newObj != null) {-->
<!--          this.axiosPost("/nannyCheckIn/findNowRecord.n", {-->
<!--            queryDate: this.dateTemp,-->
<!--            id: newObj-->
<!--          }, function (resData) {-->
<!--            this.obj = resData.obj;-->
<!--          });-->
<!--        }-->
<!--      },-->
<!--      deep: true-->
<!--    },-->
<!--  }-->

<!--}-->
<!--</script>-->